<template>
  <div>
    父组件
    <button @click="infoClick">info:{{ info }}</button>
    <hr />
    <Son :info.sync="info"></Son>
  </div>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import Son from "./Son.vue";
const info = ref({
  name: "jd",
  age: 18,
  msg: {
    count: 0,
  },
});
const infoClick = () => {
  info.value.msg.count++;
};
console.log("父组件setup函数内部");
onBeforeMount(() => {
  console.log("父组件onBeforeMount");
});
onMounted(() => {
  console.log("父组件onMounted");
});
onBeforeUpdate(() => {
  console.log("父组件onBeforeUpdate");
});
onUpdated(() => {
  console.log("父组件onUpdated");
});
onBeforeUnmount(() => {
  console.log("父组件onBeforeUnmount");
});
onUnmounted(() => {
  console.log("父组件onUnmounted");
});
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
